<template>
    <view class="wrap">
        <view class="searchBar">
            <view class="searchBar-search" @click="onSkipTap('takeOrderSearch')">
                <image src="../../static/images/icon-home-search.png"></image>
                <input type="text" placeholder="请输入关键词搜索" placeholder-style="color:#b3b3b3;">
            </view>
            <view class="searchBar-scan" @click="onSkipTap('scanCode')">
                <image src="../../static/images/icon-scan.png"></image>
            </view>
        </view>
        <view class="store" v-if="!gShopInfo.id">
            <view class="store-img">
                <image src="../../static/images/icon-home-user.png" mode="aspectFill"></image>
            </view>
            <view class="store-info" @click="onSkipTap('login')">
                <view class="store-name">未登录</view>
                <view class="store-desc">点击立即登录</view>
            </view>
            <view class="storeBtn-apply" @click="onSkipTap('openNewStore')">申请入驻</view>
        </view>
        <view class="store" v-else>
            <view class="store-img">
                <image :src="gShopInfo.logoImg" mode="aspectFill"></image>
            </view>
            <view class="store-info">
                <view class="store-name">{{gShopInfo.name}}</view>
                <view class="store-desc">
                    <view class="store-star">
                        <image src="../../static/images/icon-level4.png"></image>
                        <image src="../../static/images/icon-level3.png"></image>
                        <image src="../../static/images/icon-level2.png"></image>
                        <image src="../../static/images/icon-level1.png"></image>
                    </view>
                    <view class="store-fans">{{gShopInfo.concernCount}}粉丝</view>
                </view>
            </view>
            <view class="storeBtn-prew" @click="onSkipTap('storeIndex')">
                <image src="../../static/images/icon-home-eye.png"></image>
                <text>预览店铺</text>
            </view>
        </view>

        <view class="nav">
            <view class="nav-item" v-for="(item, index) in navList" :key="index" @click="onNavTap(item.pageUrl)">
                <image :src="item.icon"></image>
                <text>{{item.name}}</text>
            </view>
        </view>

        <view class="list">
            <view class="list-header">
                <view class="list-header_L">采购专区</view>
                <view class="list-header_R app_arrow" @click="onSkipTap('takeOrder')">查看更多</view>
            </view>
            <view class="list-main">
                <view class="list-item" v-for="(item, index) in buyList" :key="index"
                    @click="onSkipTap('purchaseNote', index)">
                    <view class="list-item_tag active" v-if="item.purchaseStatus == 0">询价中</view>
                    <view class="list-item_tag active finished" v-if="item.purchaseStatus == 1">已报价</view>
                    <view class="list-item_tag active" v-if="item.purchaseStatus == 2">已完成</view>
                    <view class="list-item_tag outOfDate" v-if="item.purchaseStatus == 3">已过期</view>
                    <view class="list-item_img">
                        <image :src="item.cover" mode="aspectFill" lazy-load></image>
                    </view>
                    <view class="list-item_title app_ellipsis2">{{item.productName}}</view>
                    <view class="list-item_bottom">
                        <view class="list-item_avatar">
                            <image :src="item.avatar" mode="aspectFill"></image>
                        </view>
                        <view class="list-item_phone">{{item.secretTel}}</view>
                        <view class="list-item_date">{{item.createTimeStr}}</view>
                    </view>
                </view>
            </view>
        </view>
        <no-more v-if="noMore && page > 1"></no-more>
    </view>
</template>

<script>
    import imUtil from '../../utils/imUtil'
    export default {
        data() {
            return {
                navList: [{
                    icon: '../../static/images/icon-nav-1.png',
                    name: '销售管理',
                    pageUrl: '/pages/salesManagerment/salesList'
                }, {
                    icon: '../../static/images/icon-nav-2.png',
                    name: '客户管理',
                    pageUrl: '/pages/customerManagement/customerList'
                }, {
                    icon: '../../static/images/icon-nav-3.png',
                    name: '库存管理',
                    pageUrl: '/pages/inventoryManagement/inventory'
                }, {
                    icon: '../../static/images/icon-nav-4.png',
                    name: '商品管理',
                    pageUrl: '/pages/commodityManagement/goodsClass'
                }, {
                    icon: '../../static/images/icon-nav-5.png',
                    name: '推广管理',
                    pageUrl: '/pages/marketingManagement/dataBoard'
                }, {
                    icon: '../../static/images/icon-nav-6.png',
                    name: '接单管理',
                    pageUrl: '/pages/takeOrder/takeOrder'
                }, {
                    icon: '../../static/images/icon-nav-7.png',
                    name: '优惠券',
                    pageUrl: 'V2'
                }, {
                    icon: '../../static/images/icon-nav-8.png',
                    name: '订单管理',
                    pageUrl: 'V2'
                }, {
                    icon: '../../static/images/icon-nav-9.png',
                    name: '模特试衣',
                    pageUrl: 'V2'
                }, {
                    icon: '../../static/images/icon-nav-10.png',
                    name: '店铺二维码',
                    pageUrl: '/pages/shopInfo/qrcode'
                }],
                buyList: [],
                page: 1,
                size: 10,
                hasLoad: false,
                noMore: false
            }
        },
        onLoad(options) {
            this.updatePage()
        },
        onShow() {
            this.loginHuanXin()
        },
        onPullDownRefresh() {
            this.updatePage()
        },
        onShareAppMessage() {

        },
        onReachBottom() {
            this.page++
            this.getList()
        },
        methods: {
            loginHuanXin() {
                let imToken = uni.getStorageSync('imToken')
                let imUserName = uni.getStorageSync('imUserName')
                if (imToken && imUserName) {
                    imUtil.loginImBytoken(imUserName, imToken)
                }
            },
            resetPage() {
                this.buyList = []
                this.page = 1
                this.size = 10
                this.hasLoad = false
                this.noMore = false
            },
            updatePage() {
                this.resetPage()
                this.getUserInfo()
                this.getList()
            },
            onSkipTap(type, index) {
                let urlObj = {
                    takeOrderSearch: '/pages/takeOrder/takeOrderSearch',
                    login: '/pages/login/index',
                    openNewStore: '/pages/apply/openNewStore?pageType=add',
                    storeIndex: '/pages/shopInfo/storeIndex',
                    takeOrder: '/pages/takeOrder/takeOrder',
                    purchaseNote: () => {
                        uni.navigateTo({
                            url: `/pages/takeOrder/purchaseNote?purchaseId=${this.buyList[index].purchaseId}`
                        })
                    },
                    scanCode: '/pages/scanCode/index'
                }
                this.$g_util.navigationTo(urlObj, type)
            },
            onNavTap(url) {
                if (url === 'V2') {
                    uni.showModal({
                        title: '提示',
                        content: '功能暂未开通，敬请期待！',
                        showCancel: false
                    })
                    return
                }
                uni.navigateTo({
                    url
                })
            },
            getUserInfo() {
                this.$store.dispatch('updateUserInfo')
            },
            /**
             * 获取采购需求列表
             */
            getList() {
                let category = 0
                this.$g_api.purchaseList({
                    category,
                    pageNum: this.page,
                    pageSize: this.size
                }).then(({
                    data
                }) => {
                    uni.stopPullDownRefresh()
                    this.hasLoad = true
                    if (data?.length > 0) {
                        data.forEach(item => {
                            item.createTimeStr = new Date(item.createTime).Format('yyyy-MM-dd')
                            item.secretTel = item.tel.slice(0, 3) + '****' + item.tel.slice(7, 11)
                            item.cover = this.$g_util.concatRequestUrl(item.cover)
                            item.avatar = this.$g_util.concatRequestUrl(item.avatar)
                        })
                        this.buyList = this.buyList.concat(data)
                    } else {
                        this.noMore = true
                    }
                })
            },
        },
    }
</script>
<style>
    page {
        padding-top: calc(var(--status-bar-height) + 20rpx + 60rpx + 20rpx + 20rpx);
    }
</style>
<style scoped lang="scss">
    .searchBar {
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        width: 100vw;
        padding: 60rpx 40rpx 20rpx 30rpx;
        padding-top: calc(var(--status-bar-height) + 20rpx);
        background-color: #fff;
        z-index: 9999;
    }

    .searchBar-search {
        flex: 1;
        display: flex;
        align-items: center;
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 30rpx;
        background-color: #f2f2f2;
        padding: 0 20rpx;

        image {
            width: 30rpx;
            height: 30rpx;
            margin-right: 20rpx;
        }

        input {
            flex: 1;
            font-size: 26rpx;
        }
    }

    .searchBar-scan {
        flex-shrink: 0;
        margin-left: 38rpx;
        font-size: 0;

        image {
            width: 42rpx;
            height: 42rpx;
        }
    }

    .store {
        display: flex;
        align-items: center;
        margin: 0 20rpx 20rpx;
        padding: 30rpx;
        border-radius: 10rpx;
        background-color: #fff;
    }

    .store-img {
        width: 100rpx;
        font-size: 0;
        flex-shrink: 0;
        margin-right: 30rpx;

        image {
            width: 100rpx;
            height: 100rpx;
            border-radius: 10rpx;
        }
    }

    .store-info {
        flex: 1;
    }

    .store-name {
        font-weight: bold;
        font-size: 36rpx;
        color: #333;
        margin-bottom: 8rpx;
    }

    .store-desc {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #999;
    }

    .store-star {
        display: flex;
        align-items: center;
        font-size: 0;

        image {
            width: 24rpx;
            height: 20rpx;
            margin-right: 4rpx;
        }
    }

    .store-fans {
        margin-left: 18rpx;
        font-size: 22rpx;
        color: #999;
    }

    .storeBtn-apply {
        flex-shrink: 0;
        width: 170rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        font-size: 24rpx;
        color: #fff;
        border-radius: 10rpx;
        background-color: #4C88FF;
    }

    .storeBtn-prew {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
        width: 170rpx;
        height: 60rpx;
        background: #F2F2F2;
        border-radius: 10rpx;

        image {
            width: 36rpx;
            height: 26rpx;
        }

        text {
            margin-left: 10rpx;
            font-size: 24rpx;
            color: #333333;
        }
    }

    .nav {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 0 20rpx;
        padding: 26rpx 24rpx 26rpx 16rpx;
        border-radius: 10rpx;
        background-color: #fff;
    }

    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0;

        &:first-child {
            margin-bottom: 46rpx;
        }

        &:nth-child(5n) {
            margin-right: 0;
        }

        image {
            width: 75rpx;
            height: 75rpx;
        }

        text {
            width: 120rpx;
            font-size: 22rpx;
            color: #333;
            text-align: center;
        }
    }

    .list {}

    .list-header {
        display: flex;
        justify-content: space-between;
        padding: 34rpx 30rpx 40rpx;
        line-height: 36rpx;
    }

    .list-header_L {
        position: relative;
        font-size: 36rpx;
        letter-spacing: 2rpx;
        font-weight: bold;

        &::before {
            content: '';
            position: absolute;
            left: 0rpx;
            bottom: -4rpx;
            width: 42rpx;
            height: 14rpx;
            background-color: #B2CDFF;
            z-index: -1;
        }
    }

    .list-header_R {
        padding-right: 20rpx;
        font-size: 24rpx;
        color: #999;

        &::after {
            border-color: #999;
            width: 12rpx;
            height: 12rpx;
            right: 6rpx;
        }
    }

    .list-main {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 16rpx;
    }

    .list-item {
        position: relative;
        width: 350rpx;
        padding-bottom: 80rpx;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        overflow: hidden;
        background-color: #fff;
    }

    .list-item_tag {
        position: absolute;
        left: 0;
        top: 0;
        width: 100rpx;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        font-size: 22rpx;
        color: #fff;
        background: #999;
        border-radius: 10rpx 0px 20rpx 0px;
        z-index: 999;

        &.active {
            background: #FF7733;
        }

        &.outOfDate {
            background-color: #999;
        }

        &.finished {
            background-color: #3377FF;
        }
    }

    .list-item_img {
        font-size: 0;

        image {
            width: 350rpx;
            height: 350rpx;
            background-color: #e6e6e6;
        }
    }

    .list-item_title {
        padding: 24rpx 16rpx 0;
    }

    .list-item_bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 350rpx;
        display: flex;
        align-items: center;
        padding: 0 16rpx 18rpx 16rpx;
    }

    .list-item_avatar {
        flex-shrink: 0;
        font-size: 0;
        margin-right: 10rpx;

        image {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            background-color: #f2f2f2;
        }
    }

    .list-item_phone {
        flex: 1;
        font-size: 20rpx;
        color: #333;
    }

    .list-item_date {
        flex: 1;
        text-align: right;
        font-size: 20rpx;
        color: #999;
    }
</style>